<template>
	<view class="upload">
		<u-upload 
		ref="uUpload"
		:action="action"
		name="iFile"
		:width="width" 
		:height="height"
		:header="header"
		customBtn="true"
		:show-progress="false"
		:multiple="multiple"
		:source-type="sourceType"
		:max-count="maxCount"
		:file-list="file_list"
		:before-upload="beforeUpload"
		@on-success="uploadSuccess"
		@on-change="Change"
		@on-error="UploadError"
		@on-progress="uploadProgress"
		@on-uploaded="Uploaded"
		@on-remove="Remove"
		auto-upload:="autoUpload"
		>
			<view slot="addBtn">
				<view
					class="u-list-item u-add-wrap"
					hover-class="u-add-wrap__hover"
					hover-stay-time="150"
					:style="'width: '+width+'rpx;height: '+height+'rpx;'"
				>
					<u-icon name="photo" class="u-add-btn" size="40"></u-icon>
					<view class="u-add-tips">{{ uploadText }}</view>
				</view>
			</view>
			
		</u-upload>
		<view class="u-add-tips" v-if="tips != ''">{{tips}}</view>
	</view>
</template>

<script>
	import { config } from '@/common/config.js'
	export default{
		data(){
			return {
				action:config.base_url + '/index.php/api/upload/image',
				header:{},
				// file_list:[],
				multiple:false
			}
		},
		created() {
			if(this.maxCount > 1){
				this.multiple = true
			}
		},
		computed:{
			file_list(){
				var file_list = [];
				console.log(this.fileList)
				this.fileList.forEach(item => {
					if(item != ''){
						file_list.push({
							url:item
						})
					}
				})
				return file_list
			},
		},
		props:{
			//是否自动上传
			autoUpload:{
				type:Boolean,
				default(){
					return false
				},
			},
			// 内部预览图片区域和选择图片按钮的区域宽度
			width: {
				type: [String, Number],
				default: 200
			},
			// 内部预览图片区域和选择图片按钮的区域高度
			height: {
				type: [String, Number],
				default: 200
			},
			uploadText:{
				type:String,
				default: '选择图片'
			},
			fileList:{
				type: Array,
				default() {
					return [];
				}
			},
			// 最大上传数量
			maxCount: {
				type: [String, Number],
				default: 1
			},
			tips:{
				type: String,
				default: ''
			},
			sourceType:{
				type:Array,
				default(){
					return ['album', 'camera']
				} 
			}
		},
		methods:{
			uploadSuccess(data, index, lists, name){
				this.$refs.uUpload.clear();
				uni.hideLoading()
				this.$emit('on-success',data, index, lists, name)
			},
			beforeUpload(index, list) {
				uni.showLoading()
			},
			Change(res, index, lists, name){
				this.$emit('on-change',res, index, lists, name)
			},
			UploadError(res, index, lists, name){
				this.$emit('on-error',res, index, lists, name)
			},
			uploadProgress(res, index, lists, name){
				this.$emit('on-progress',res, index, lists, name)
			},
			Uploaded(lists, name){
				this.$emit('on-uploaded',lists, name)
			},
			Remove(index, lists, name){
				this.$emit('on-remove',index, lists, name)
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-list-item {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin: 10rpx;
		background: rgb(244, 245, 246);
		position: relative;
		border-radius: 10rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}
	.u-add-wrap {
		flex-direction: column;
		color: $u-content-color;
		font-size: 26rpx;
	}
	
	.u-add-tips {
		margin-top: 20rpx;
		color:$u-type-info;
		line-height: 40rpx;
		font-size: 24rpx;
	}
	
	.u-add-wrap__hover {
		background-color: rgb(235, 236, 238);
	}
	
</style>
